<template>
	<view class="p30">
		<view class="flex mb40">
			<u-avatar :src="data.avatar||''" size="92"></u-avatar>
			<view class="flex1 als-s flex-col row-around ml20">
				<view class="fs30 fw-600">{{data.name}}</view>
				<view class="color-999 fs24">手机号：{{data.mobile}}</view>
			</view>
			<view class="tc" @click="getQrcode()">
				<image src="/static/img/my/qrcode.png" class="w36 h36" mode=""></image>
				<view class="fs24">推广码</view>
			</view>
		</view>
		<view class="p20 radius16 flex row-around w-max color-fff tc fs32" style="background: #FFB104;">
			<view class="">
				<view class="">直推人员</view>
				<view class="mt8">{{team.zhi||0}}</view>
			</view>
			<view class="">
				<view class="">间推人员</view>
				<view class="mt8">{{team.team||0}}</view>
			</view>
		</view>
		<view class="mt50 fw-w fs34 mb16">推荐列表</view>
		<u-search placeholder="会员昵称或手机号" v-model="keywords" :showAction="false" />
		<view class="h20"></view>
		<u-subsection :list="tabs" :current="current" @change="current=$event,getList()" height="80">
		</u-subsection>
		<view class="w-max">
			<u-empty mode="list" v-if="!list.length" marginTop="100"></u-empty>
			<view class="pt36 pb36 border-b" v-for="(item,index) in list" :key="index">
				<view class="flex ">
					<u-avatar :src="item.avatar||''" size="80"></u-avatar>
					<view class="flex1 als-s flex-col row-around ml20">
						<view class="fs30 fw-600">{{item.name}}</view>
						<view class="color-999 fs24">{{item.mobile}}</view>
					</view>
					<view class="">{{item.create_time}}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" borderRadius="20" width="700" :maskCloseAble="false" zIndex="998">
			<view class="p40">
				<view class="tc fs32 fw-w">申请达人</view>

				<u-form labelWidth="120">
					<u-form-item label="姓名">
						<u-input v-model="form.name" placeholder="请输入姓名"></u-input>
					</u-form-item>
					<u-form-item label="手机号">
						<u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入手机号"></u-input>
					</u-form-item>
					<view class="h20"></view>
					<view class="flex fs24 mt20" @click="checked=!checked">
						<radio :checked="checked" class="scale7" :color="$zs" />
						<view class="color-999">已阅读并同意</view>
						<view class="color-zs"
							@click.stop="$u.route('/pages/public/text',{text:'promoter_equity',tit:'达人权益'})">《达人权益》
						</view>
						<view class="color-999">与</view>
						<view class="color-zs"
							@click.stop="$u.route('/pages/public/text',{text:'promoter_agreement',tit:'达人免责协议'})">
							《达人免责协议》</view>
					</view>
					<view class="h40"></view>
					<u-button type="warning" @click="submit">
						{{data.status===0?"申请中":data.status==2?'已驳回 重新提交':'提交'}}
					</u-button>
				</u-form>
			</view>
		</u-popup>
		<u-popup v-model="qrcodeShow" mode="center" borderRadius="20">
			<view class="p20">
				<image :src="qrcode.qrcode" class="w300 h300" mode="aspectFit" show-menu-by-longpress></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				show: false,
				qrcodeShow: false,
				form: {
					name: "",
					mobile: ''
				},
				current: 0,
				tabs: [{
					name: '直推成员',
					type: 'zhi'
				}, {
					name: '间推人员',
					type: 'team'
				}],
				data: '',
				team: '',
				list: '',
				page: 1,
				keywords: '',

				qrcode: '',
			};
		},
		watch: {
			keywords() {
				this.$u.debounce(this.getList, 500)
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			submit() {
				if(!this.checked)return this.$msg('请勾选协议')
				this.$request('/member/team/applyPromoter', this.form).then(res => {
					// this.show = false
					this.$msg(res.msg)
					this.getData()
				})
			},
			getQrcode() {
				if (this.qrcode) return this.qrcodeShow = true
				this.$request('/member/team/getQrcode').then(res => {
					this.qrcode = res.data
					this.qrcodeShow = true
				})
			},
			getData() {
				this.$request('/member/team/promoterInfo').then(res => {
					let data = res.data || ''
					for (let key in this.form) {
						this.form[key] = data[key]
					}
					this.data = data || ''
					if (data.status == 1) {
						this.getList()
						this.show = false
					} else {
						this.show = true
					}
				})
			},
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				this.$request('/member/team/team_list', {
					page: this.page,
					type: this.tabs[this.current]?.type,
					keywords: this.keywords,
				}).then(res => {
					this.team = res.data
					let list = res.data?.data?.data || ''
					list.forEach((item, index) => {
						item.open = index ? false : true
					})
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
</style>
